<template>
  <div class="h240 w100p">
    <div
      class="w100p h240"
      id="recoveryTotal"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    // this.handleInit();
  },
  methods: {
    handleInit(row) {
      if(!row) return
      let myChart = echarts.init(document.getElementById("recoveryTotal"));
      let option = {
        grid: {
          top: "5%",
          left: "5%",
          right: "3%",
          bottom: "10%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            color: "#59588D",
            axisLine: {
              show: true,
            },
            axisLabel: {
              color: "#282828",
            },
            splitLine: {
              // show: true
            },

            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: {
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            // margin: 20,
            textStyle: {
              color: "#737373",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(131,101,101,0.2)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 50,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#5ef3ff",
                    },
                    {
                      offset: 1,
                      color: "#06a4f4",
                    },
                  ],
                  false
                ),
              },
            },
            label: {
              normal: {
                show: true,
                fontSize: 16,
                color: "#919191",
                position: "top",
              },
            },
            data: row,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>